<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <div id="app">
       <h1>Todo</h1>
	   <p>3 of 4 remaning [archive]</p>
	   <h1 v-for="item in todos">
         <input type="checkbox" v-model="item.done">
         <span>{{item.title}}</span>
	   </h1>
       <input type="text" v-model="todoText"><button v-on:click="handleAddTodoClick">add</button>
    </div>
    <script src="vue.js"></script>
    <script>
      const todos=[
      	{
      		id:1,
      		title:'吃饭',
            done:true
      	},

        {
      		id:2,
      		title:'睡觉',
      		done:true
      	},

        {
      		id:3,
      		title:'打豆豆',
      		done:false
      	},

      	{
      		id:4,
      		title:'敲代码',
      		done:true
      	}
      ]

      const app=new Vue({
          el:'#app',
          data:{
          	todos
          },
          methods:{
          	handleAddTodoClick(){
             const todoText=this.todoText.trim()
             if(!todoText.length){
               return
          	  }
              const todos=this.todos
              todos.push({
            	id:todos[todos.length-1].id+1,
            	title:todoText,
            	done:false
               })
          	}
          }
      })
    </script>
</body>
</html>